<template>

  <div class="child-node-root info-txt-container" :style="{  width:`calc(100% - ${paddingLeft * (nodeInfo.level - 2) + 50}px)`}">
    <div @click.stop="" v-if="nodeInfo.level > 2" class="decorate"
         :style="{left:`-${(nodeInfo.level - 1) * paddingLeft}px`,width:`${(nodeInfo.level - 1) * paddingLeft}px`}">
      <div class="decorate-item" :style="{left:`${(item - 1) * paddingLeft}px`}" v-for="item in nodeInfo.level - 1">
        <div v-show="item > 1" :class="!firstChild || item != nodeInfo.level - 1  ? ['line'] : ['line','hidden']"></div>
        <div :type="data.nodeStateType" class="point" v-show="item == nodeInfo.level - 1 && item > 1"></div>
        <div v-show="item > 1"
             :class="!lastChild || item != nodeInfo.level - 1  ? ['line', 'last-line'] : ['line','last-line','hidden']"></div>
      </div>
    </div>
    <div @click.stop="" class="txt-container">
      <div class="title-container">
        <div :class="nodeInfo.level == 2 ? ['title-txt','first'] : ['title-txt']">
          <span class="level-txt">
          {{ data.levelTxt }}
          </span>
          {{ data.title }}

          <span class="state" :type="data.acceptStateType">
            <div class="state-decorate"></div>
            {{getEmuDictLabel('acceptStateType',data.acceptStateType)}}
          </span>

          <span class="state" :type="data.nodeStateType">
            <div class="state-decorate"></div>
            {{getEmuDictLabel('nodeStateType',data.nodeStateType)}}
          </span>
        </div>
        <div class="handel-container" v-if="isArr(btList)" @click.stop="">
          <el-dropdown trigger="click" @command="submitEvent">
            <span class="el-dropdown-link">
              <i class="el-icon-more"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="item.handelCode" v-for="(item,index) in btList" :icon="item.icon">
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <txt-row :txt-config="txtConfig" :data="data"></txt-row>
    </div>
    <div @click="changeBtClass" class="tree-show-bt">
      <i :class="btClassList[btIndex]"></i>
    </div>
  </div>
</template>

<script>
import TxtRow from "@/views/securityCheck/components/txtRow.vue";
import {EVENT_CONFIG, getEventBtList} from "@/views/securityCheck/ztDefectInspect/components/eventConfig";
import {isArr} from "@/utils/arrayUtil";
import {getEmuDictLabel} from "@/constantData";

export default {
  components: {
    TxtRow
  },
  props: {
    data: {
      type: Object,
    },
    nodeInfo: {
      type: Object
    },
    paddingLeft: {
      type: Number
    },
    showLevel:{
      type: Number
    }
  },
  data() {
    return {
      btIndex: this.showLevel > this.nodeInfo.level - 1   ? 1 : 0,
      btClassList: ['el-icon-arrow-right', 'el-icon-arrow-down'],
      txtConfig: [
        [
          {
            label: '计划完成时间',
            value: 'planTime'
          },
        ]
      ]
    }
  },
  computed: {
    firstChild() {
      let {nodeInfo} = this
      return nodeInfo.parent.childNodes.findIndex(item => item.id == nodeInfo.id) == 0
    },
    lastChild() {
      let {nodeInfo} = this
      return nodeInfo.parent.childNodes.findIndex(item => item.id == nodeInfo.id) == nodeInfo.parent.childNodes.length - 1
    },
    btList() {
      let {nodeInfo, data} = this
      return getEventBtList(nodeInfo, data)
    }
  },
  methods: {
    isArr,
    getEmuDictLabel,
    changeBtClass() {
      this.btIndex = this.btIndex == 0 ? 1 : 0
    },
    submitEvent(handelCode) {
      let item = this.btList.find(cItem => cItem.handelCode == handelCode)
      this.$emit('submitEvent', item, this.data, this.nodeInfo)
    }
  }
}
</script>

<style scoped lang="scss">
.child-node-root {
  width: 100%;
  box-sizing: border-box;
  position: relative;

  .txt-container {
    border-bottom: 1px solid #f5eded;

    .title-container {
      margin-bottom: 10px !important;
    }
  }


  .decorate {
    position: absolute;
    top: 0;
    bottom: -25px;
    left: 0;
    width: 20px;

    .decorate-item {
      height: 100%;
      width: 1px;
      position: absolute;
      top: -18px;
      bottom: 0;
      z-index: 99;

      .line {
        width: 100%;
        border-left: 2px dashed rgba(220, 223, 230, 1);
        height: 49%;

        &.hidden {
          visibility: hidden;
        }
      }

      .point {
        width: 10px;
        height: 10px;
        position: relative;
        left: -4px;
        border-radius: 50%;

        &[type = '1'] {
          background:rgb(213, 187, 6);
        }

        &[type = '2'] {
          background: rgba(18, 190, 80, 1);
        }

        &[type = '3'] {
          background: rgba(32, 125, 255, 1);

        }

        &[type = '4'] {
          background: rgb(255, 32, 91);
        }
      }
    }
  }

  .tree-show-bt {
    position: absolute;
    right: 10px;
    bottom: 5px;
  }
}
</style>
